<template>
  <div style="height: 100%; width: 100%;">
    <div class="installed-content">
      <div class="nav-bar">
        <div>
          <a-button class="back-btn" type="link" @click="back"
            ><a-icon type="left"></a-icon>返回</a-button
          >
          <a-divider type="vertical" />
          <strong style="margin-left: 8px;">已安装</strong>
        </div>
        <a-input-search
          v-model="queryFm.whereValue"
          allow-clear
          class="search-input"
          placeholder="搜索算法、模型、教程视频"
        />
      </div>

      <div class="tab-content">
        <a-tabs
          v-model="tabIndex"
          default-active-key="1"
          align="left"
          class="tabs"
        >
          <a-tab-pane key="1" tab="模型&算法">
            <local-list
              class="model-list"
              :tab="tabIndex"
              :where-value="queryFm.whereValue"
            />
          </a-tab-pane>
          <a-tab-pane key="2" tab="插件" disabled> </a-tab-pane>
        </a-tabs>
      </div>

      <!-- <div
        v-if="onlinePlugins.length > 0"
        id="list"
        class="model-list four-scroll-y"
        style="overflow: auto;"
      >
        <plugin-cell
          v-for="item in onlinePlugins"
          :key="item.id"
          :cell="item"
          class="model-cell"
          @click.native="viewDetail(item)"
          @search-keyword="setKeyword"
        />
      </div>
      <div v-else class="list-empty">
        <img alt="" src="@/assets/view/empty2.png" />
        暂无数据
      </div>
      <a-pagination
        v-if="onlinePlugins.length > 0"
        v-model="pageIndex"
        class="pagination"
        align="right"
        :page-size.sync="pageSize"
        :default-current="1"
        :total="queryFm.totalElements"
        show-size-changer
        show-quick-jumper
        show-less-items
        @change="pageChange"
      /> -->
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import PluginCell from '@/components/plugin/PluginCell.vue'
import LocalList from '@/components/plugin/LocalList.vue'

import { queryOnlineModel } from '@/api/plugin'

@Component({
  components: {
    PluginCell,
    LocalList,
  },
})
export default class InstalledList extends Vue {
  @Prop() field!: string
  @Prop() whereValue!: string
  public tabIndex: any = '1'
  public tableLoading: boolean = false
  public onlinePanel: any = []
  public onlinePlugins: any = []
  public panelLoading: boolean = false
  public queryFm: any = {
    type: '',
    whereValue: undefined,
    orderKey: 'public_time',
    order: 'desc',
  }
  public pageIndex: number = 1
  public pageSize: number = 10

  // @Watch('pageIndex')
  // public pageIndexChange() {
  //   const list = document.querySelector('#list') as any
  //   list.scrollTop = 0
  //   this.queryOnlineList()
  // }

  // @Watch('pageSize')
  // public pageSizeChange() {
  //   const list = document.querySelector('#list') as any
  //   list.scrollTop = 0
  //   this.queryOnlineList()
  // }

  @Watch('queryFm.whereValue')
  public whereValueChange() {
    this.$emit('updata-key', 'whereValue', this.queryFm.whereValue, 2)
  }

  @Watch('field')
  public initList() {
    this.queryFm.field = this.field
    this.queryOnlineList()
  }

  @Watch('whereValue')
  public initList2() {
    this.queryFm.whereValue = this.field
    // this.queryOnlineList()
  }

  public created() {
    this.queryOnlineList()
    window.addEventListener('keyup', this.globalKeyUp)
  }

  public beforeDestroy() {
    document.removeEventListener('keyup', this.globalKeyUp)
  }

  public back() {
    this.$router.go(-1)
  }

  public pageChange(page: number, pageSize: number) {
    const list = document.querySelector('#list') as any
    list.scrollTop = 0
    this.pageIndex = page
    this.pageSize = pageSize
    this.queryOnlineList()
  }

  public async queryOnlineList() {
    this.tableLoading = true
    try {
      const response = await queryOnlineModel({
        data: {
          ...this.queryFm,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        },
      })
      this.tableLoading = false
      if (response.data.code === 100) {
        this.onlinePlugins = response.data.result.data
        this.pageIndex = response.data.result.pageIndex
        this.pageSize = response.data.result.pageSize
        this.queryFm.totalElements = response.data.result.totalElements
      } else {
        this.$message.error(response.data.message)
      }
    } catch {
      this.tableLoading = false
    }
  }

  public setKeyword(keyword: any) {
    this.pageIndex = 1
    this.pageSize = 10
    this.queryFm.whereValue = this.queryFm.whereValue
      ? `${this.queryFm.whereValue},${keyword}`
      : keyword
    // if (this.queryFm.whereValue){
    //   this.$set(this.queryFm,'whereValue',`${this.queryFm.whereValue},${keyword}`)
    // }else{
    //   this.$set(this.queryFm,'whereValue',keyword)
    // }
    this.queryOnlineList()
  }

  public viewDetail(item: any) {
    if (item.type === 1) {
      this.viewAlgoDetail(item.id)
    } else {
      this.viewModelDetail(item.id)
    }
  }

  public viewModelDetail(id: any) {
    this.$router.push({ path: `/management/plugin/detail?id=${id}` })
  }

  public viewAlgoDetail(id: any) {
    this.$router.push({ path: `/management/plugin/algorithm?id=${id}` })
  }

  public globalKeyUp($event: any) {
    if ($event.key === 'Enter') {
      this.queryOnlineList()
    }
  }

  public onSearch() {}
}
</script>

<style lang="less" scoped>
@import '@/constants';
@import '@/styles/scroll-bar';

/deep/ .ant-tabs-bar {
  margin: 4px 0;
  margin-bottom: 0;
  margin-left: 24px;
}

.installed-content {
  height: calc(100vh - 140px);
  padding: 16px;
  width: 100%;

  .nav-bar {
    align-items: center;
    background: #fff;
    display: flex;
    height: 48px;
    justify-content: space-between;
    margin-bottom: 12px;

    .search-input {
      margin-right: 28px;
      max-width: 400px;

      /deep/ .ant-input {
        border: 1px solid #e9e9e9;
        border-radius: 24px;
        font-size: 14px;
        height: 32px;
      }
    }
  }

  .tab-content {
    background: #fff;
    height: calc(100vh - 200px);
    width: 100%;

    // .tabs {
    //     padding-left: 24px;
    //   }
  }

  .model-list {
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
    height: calc(100vh - 248px);

    margin-top: 0;
    // padding: 24px;
    padding-top: 0;
    width: 100%;

    .model-cell {
      background: #fff;
      height: 200px;
      padding: 12px 24px;
      width: 100%;

      &:hover {
        background-color: #f0f3ff;
        cursor: pointer;
      }
    }
  }

  .list-empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: calc(100% - 80px);
    justify-content: center;
    width: 100%;
  }

  .pagination {
    background: #fff;
    padding: 24px;
  }

  .btns {
    margin-bottom: 12px;
    position: relative;
  }

  .left-space {
    margin-left: 12px;
  }
}
</style>
